import {Canvas, Path, Skia, rect, rrect} from '@shopify/react-native-skia';
import {Dimensions} from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

const {width: SCREEN_WIDTH, height: SCREEN_HEIGHT} = Dimensions.get('window');

const scanBoxSize = SCREEN_WIDTH - 135;
const CORNER_RADIUS = 12;

const scanBoxLeft = (SCREEN_WIDTH - scanBoxSize) / 2;
const scanBoxTop = (SCREEN_HEIGHT - scanBoxSize) / 2 - 30;

export const SkiaMask = () => {
  const {top}=useSafeAreaInsets()
  // 外层遮罩矩形
  const outer = Skia.Path.Make();
  outer.addRect(rect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT + top));

  // 中间圆角透明区域
  const inner = Skia.Path.Make();
  const roundRect = rrect(
    rect(scanBoxLeft, scanBoxTop, scanBoxSize, scanBoxSize),
    CORNER_RADIUS,
    CORNER_RADIUS,
  );
  inner.addRRect(roundRect);

  // 创建两个 Paint：
  const maskPaint = Skia.Paint();
  maskPaint.setColor(Skia.Color('rgba(0, 0, 0, 0.5)'));

  const clearPaint = Skia.Paint();
  clearPaint.setBlendMode(0); // 清除中间区域

  return (
    <Canvas
      style={{
        position: 'absolute',
        top: 0,
        left: 0,
        width: SCREEN_WIDTH,
        height: SCREEN_HEIGHT + top,
      }}>
      {/* 先绘制整块黑色遮罩 */}
      <Path path={outer} paint={maskPaint} />

      {/* 然后在中间挖一个圆角洞 */}
      <Path path={inner} paint={clearPaint} />
    </Canvas>
  );
};
